<template>
 <el-dialog
        title="编辑消息模版"
        :modal-append-to-body="true"
        :visible.sync="dialogVisible"
        width="800px">
        <div class="content">
        <el-form class="left m7-form" :model="form" label-position="top" >
          <el-form-item prop="typeName" lable="模版类型">
            <el-input placeholder="请输入内容" disabled v-model="form.typeName"></el-input>
          </el-form-item>
          <el-form-item prop="title" label="消息标题">
            <el-input type="text" maxlength="10" disabled show-word-limit placeholder="请输入内容" v-model="form.title" ></el-input>
          </el-form-item>
          <el-form-item prop="firstData" label="提示文案">
            <el-input type="textarea" maxlength="50" show-word-limit placeholder="请输入内容" v-model="form.firstData.value" ></el-input>
          </el-form-item>
          <el-form-item prop="keyWord" label="关键词">
            <div>
            <div v-for="item in form.keyWord" :key="item.key" class="key-word">
              <el-input placeholder="请输入内容" disabled v-model="item.name" style="margin-right: 16px"></el-input>
              <el-input placeholder="请输入内容" v-model="item.value"></el-input>
            </div>
            </div>
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input type="textarea" maxlength="100" show-word-limit placeholder="请输入内容" v-model="form.remark.value" ></el-input>
          </el-form-item>
        </el-form>
        <div class="right">
          <div class="panel">
            <div class="top">
              <div style="font-weight: 600;">9:41</div>
              <div>
                <icon-svg iconClass="SDKxinhao"></icon-svg>
                <icon-svg iconClass="SDKWi-Fi"></icon-svg>
                <icon-svg iconClass="SDKdianchi"></icon-svg>
              </div>
            </div>
            <div class="center">
              <icon-svg iconClass="zuo" style="font-size: 12px"></icon-svg>
              <span class="title">七陌·售后云</span>
              <icon-svg iconClass="chengyuan" style="font-size: 12px"></icon-svg>
            </div>
            <div class="bottom">
              <div class="card">
                <div class="card-title">{{form.title}}</div>
                <div class="tip">这里展示模板内容的文案，不可以换行，仅支持中
英文和数字输入</div>
                <div v-for="item in form.keyWord" :key="item.key" class="card-item">
                  <span>{{item.name}}：</span>
                  <span style="color: #008BEE">{{item.value}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="icon-div">
            <icon-svg iconClass="SDKjianpan" style="font-size: 10px;"></icon-svg>
          </div>
          <div class="line"></div>
        </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="save">保存</el-button>
        </div>
      </el-dialog>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'
// eslint-disable-next-line no-restricted-imports
import { cloneDeep } from 'lodash';
@Component({
  name: 'editTempl',
  components: {
  }
})
export default class NoPublic extends Vue {
  [x: string]: any
  private dialogVisible = false

  private form = {
    keyWord: [],
    typeName: '',
    title: '',
    firstData: {
      value: ''
    },
    remark: {
      value: ''
    }
  }

  private open (row) {
    this.dialogVisible = true
    this.form = cloneDeep(row)
  }

  private save () {
    commonAction({ url: '/server-public/action/wx-open/messageTemplate', method: 'post', data: this.form }).then(res => {
      if (res.success) {
        this.$message.success('更新成功！')
        this.dialogVisible = false
        this.$emit('success')
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
.tip {
  font-weight: 400;
  color: #767E91;
  line-height: 20px;
  margin-bottom: 12px
}
.icon-div
  width: 18px;
  height: 18px;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  margin-bottom: 12px;
.line {
  width: 120px;
  height: 4px;
  background: #000000;
  border-radius: 2px;
  margin: 0px auto;
}
.card {
  background-color: #fff
  padding: 10px
  font-size: 12px
  margin: 10px
  border-radius: 4px
}
.bottom {
  position: absolute;
  width: 320px;
  border-radius: 4px;
  bottom: 0px;
}
.card-title {
  font-weight: 400;
  color: #303753;
  font-size: 14px
  margin-bottom: 16px
}
.card-item {
  font-weight: 400;
  color: #303753;
  margin-bottom: 10px
}
.content
  display: flex
  .left {
    flex: 1
  }
  .right {
    border-radius: 16px
    width: 340px
    margin-left: 20px
    border: 1px solid #E7E9ED;
    box-shadow: 0px 1px 8px 0px rgba(224, 230, 240, 0.7);
    .top {
      display: flex;
      justify-content: space-between;
      padding: 10px 24px;
    }
    .center {
      display: flex
      padding: 0px 14px;
      justify-content: space-between
      .title {
        font-weight: 500;
        font-size: 14px
      }
    }
    .panel {
      background: #EDEDED;
      height: calc(100% - 70px);
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      margin: 10px
      position: relative;
    }
  }
.key-word {
  display: flex
}
.opera-span {
  color: #008cee;
  margin-right: 10px;
  cursor: pointer;
}
</style>
